<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#333"
				:title="t('user.calling.calling')"
				:moreTit="show ? t('user.calling.finsh') : t('user.calling.manage')"
				moreTitColor="#0C81F7"
				@more="show = !show"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="mb30" v-for="(item, index) in 2">
				<view class="card">
					<view class="flex align-center flex-between">
						<view class="flex align-center">
							<image
								class="icon"
								src="/static/images/xcz.png"
								mode="aspectFill"
							></image>
							<view class="name">{{ $t("user.calling.calling") }}</view>
						</view>
						<view class="username">{{ $t("user.calling.username") }}</view>
					</view>
					<view>
						<view class="t1">{{ $t("user.calling.num") }}</view>
						<view class="t2">冀EL098K</view>
					</view>
					<view class="flex flex-between align-end">
						<view>
							<view class="t1">{{ $t("user.calling.no") }}</view>
							<view class="t2">LFMA P22C 5A02 0760 C</view>
						</view>
						<view
							class="flex align-center"
							@click="router.push('/pages/user/callingCard/detail')"
						>
							<view class="detail">{{ $t("user.calling.detail") }}</view>
							<cl-icon name="arrow-right" color="#fff" size="34rpx"></cl-icon>
						</view>
					</view>
				</view>
				<view class="option animate__animated animate__fadeInDown" v-if="show">
					<view class="flex flex-between align-center edit" @click="more">
						<view> {{ $t("user.calling.edit") }} </view>
						<cl-icon name="arrow-right" color="#999" size="34rpx"></cl-icon>
					</view>
					<view class="edit" @click="del">{{ $t("user.calling.del") }} </view>
				</view>
			</view>
			<view class="add flex flex-center flex-column" @click="more">
				<cl-icon name="plus" size="60rpx"></cl-icon>
				{{ $t("user.calling.add") }}
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import { ref, reactive } from "vue";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user, cache } = useStore();
const ui = useUi();
const app = useApp();
const show = ref(false);
const del = () => {
	ui.showConfirm({
		title:
			cache.lang == "zh"
				? "确定要删除该行驶证吗？"
				: "Are you sure you want to delete this license?",
		confirmButtonText: cache.lang == "zh" ? "确认" : "Confirm",
		cancelButtonText: cache.lang == "zh" ? "取消" : "Cancel",
	});
};

const more = () => {
	show.value = false;
	router.push("/pages/user/callingCard/edit");
};
</script>

<style lang="scss" scoped>
:deep(.cl-confirm__title) {
	padding: 10rpx 30rpx;
}
.page-info {
	padding: 30rpx;

	.card {
		width: 690rpx;
		height: 380rpx;
		// background: linear-gradient(135deg, #4292b7 0%, #00c9a1 100%);
		background-image: url("/static/images/cardbg1.png");
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
		box-shadow: 0 0.3125rem 0.625rem 0 rgba(170, 170, 170, 0.5);

		.icon {
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;
		}

		.name {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
		}

		.username {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #83e5e5;
		}

		.t1 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #83e5e5;
			margin-top: 48rpx;
		}

		.t2 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 10rpx;
		}

		.detail {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
		}
	}

	.option {
		width: 650rpx;
		height: 260rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		left: 50%;
		top: -20rpx;
		margin-left: -325rpx;
		padding: 20rpx 60rpx 0;
		box-sizing: border-box;

		.edit {
			height: 120rpx;
			border-bottom: 1rpx solid #e5e5e5;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 120rpx;
		}
	}

	.add {
		width: 690rpx;
		height: 240rpx;
		border-radius: 20rpx;
		border: 4rpx solid #dddddd;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
		color: #1981f8;
	}
}
</style>
